// 渲染右键列表
import ContentMenu from './ContentMenu.vue';
export default {
  name: 'OrgContextMenu',
  components: {
    ContentMenu
  },
  inheritAttrs: false,
  props: {
    // 回调数据项
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    //判断是否启用右键
    funPanY: {
      type: Function,
      default: () => {
        return true;
      }
    },
    // 右键目标元素
    target: null,
    // 是否开启右键菜单
    enableContextMenu: {
      type: Boolean,
      default: true
    },
    // 右键菜单列表选项
    contextMenuList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      contextMenuVisible: false
    };
  },
  methods: {
    // 隐藏右键菜单
    hideContextMenu(visible = false) {
      this.contextMenuVisible = visible;
    },
    // 渲染列表
    renderContextList(h, list) {
      const self = this;
      // 生成子节点
      const childNodes = list.map((item) => {
        // 各项的图标
        const icon = item.icon
          ? h('em', {
            domProps: {
              className: item.icon
            }
          })
          : '';
        // 是否有更多按钮
        let hasMore = '';
        if (item.children && item.children.length) {
          hasMore = item.children
            ? h('em', {
              domProps: {
                className: `icon-more el-icon-arrow-right`
              }
            })
            : '';
        }
        // 右键事件触发

        // 各项点击事件
        const itemData = {
          on: {
            click: (e) => {
              e.stopPropagation();
              // 点击事件
              if (item.event) {
                const clickHandler =
                  self.$listeners[`context-click-${item.event}`];
                clickHandler && clickHandler(self.data, item, e);
              }
              if (!item.stop) {
                // 关闭右键菜单
                self.contextMenuVisible = false;
              }
            }
          }
        };
        // 是否自定义渲染节点
        let listChild = [];
        if (!!item.render && typeof item.render === 'function') {
          const renderItem = item.render(h, item, this.data);
          listChild = [renderItem];
        } else {
          listChild = [icon, item.value, hasMore];
        }
        // 递归子节点
        if (!!item.children && Array.isArray(item.children)) {
          const childList = self.renderContextList(h, item.children);
          listChild.push(h('div', itemData, childList));
        }
        return h('p', itemData, listChild);
      });
      return childNodes;
    }
  },
  render(h) {
    const self = this;
    if (self.enableContextMenu) {
      if (!self.target) {
        return;
      }
      const data = {
        props: {
          multiple: true,
          target: self.target,
          value: self.contextMenuVisible
        },
        on: {
          input: (visible) => {
            let flag = self.funPanY(self.data);
            if (!flag) {
              self.contextMenuVisible = false;
            }
            flag && (self.contextMenuVisible = visible);
          },
          click: (e) => {
            self.hideContextMenu();
          }
        }
      };
      // 子节点
      const nodes = [];
      if (!!self.contextMenuList && self.contextMenuList.length) {
        // 生成子节点
        const childNodes = self.renderContextList(h, self.contextMenuList);
        const content = h('div', childNodes);
        nodes.push(content);
      }
      return h('content-menu', data, nodes);
    }
    return '';
  }
};
